<template>
  <div
    class="tile-frame"
    @click.prevent.stop="$emit('click',$event)"
    @dblclick.prevent.stop="$emit('dblclick',$event)"
    @contextmenu.prevent.stop="$emit('contextmenu',$event)"
  >
    <icon-show class="tile-icon" :src="data" />
    <div class="tile-text-list">
      <h4 class="tile-text">{{ data.name || data.item_name }}</h4>
      <p v-for="(item, index) in displayData" :key="index" class="tile-text">{{ item.info_name }}：{{ item.value }}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NodeTile',
  components: {
    IconShow: () => import('@components/IconShow.vue')
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    displayData() {
      return this.data.infolist || [
        { info_name: 'ID', value: this.data.id },
        { info_name: '上层对象', value: this.data.parent_name },
        { info_name: '前置对象', value: this.data.previous_name }
      ]
    }
  }
}
</script>
<style scoped>
.tile-frame {
  margin: .5rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.tile-text-list {
  margin: 1rem 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tile-text {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
h4.tile-text {
  margin-bottom: .5rem;
}
p.tile-text {
  margin-bottom: .3rem;
}
.tile-icon {
  width: 30%;
  font-size: 4vw;
  padding: 0 .5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  justify-content: center;
}
</style>
